<template>
	<view class="buy-box">
		
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"  @scrolltolower="lower">
			<view class="sup-item-box">
				
				<view class="buy-title">
					历史采购
				</view>
				<view class="buy-list" v-for="(item,index) in myBuyArr" :key="index">
					<view class="buy-top">
						<!-- 是否过期 -->
						<view class="mark-date" v-if="item.activeStatus">
							已过期
						</view>
						<view class="mark-collection" v-if="item.collec">
							<img  src="https://file.casugn.com/storecompcard//mBjjyxq1i74Aa78abb376722c7b4ffa682224920060e_1663137688378.png" alt="">
						</view>
						<view class="buy-top-title">
							{{item.name}}
						</view>
						<view class="buy-top-cont">
							<view class="buy-top-cont-lt">
								采购数量：<text>{{item.buyNum}}</text>
							</view>
							<view class="buy-top-cont-rt">
								联系电话：<text>{{item.userTel}}</text>
							</view>
						</view>
						<view class="buy-top-bt">
							<!-- <view class="buy-top-bt-tel">
								<text>0</text>人联系
							</view> -->
							<view class="buy-top-bt-date">
								{{item.endTime==null?'长期采购':'截止到:'+item.endTime}}
							</view>
						</view>
					</view>
					<view class="buy-btm" v-if="!item.collec">
						<!-- icon="trash" iconColor="#2684ff" -->
						<u-button text="删除"  :customStyle="customStyle1"  color="red" :plain="true" @click="deleteInfo(item,index)"></u-button>
						<u-button text="编辑" :customStyle="customStyle2" color="#2684ff" :plain="true" @click="editInfo(item,index)"></u-button>
					</view>
					<view class="buy-btm" v-if="item.collec">
						<!-- icon="trash" iconColor="#2684ff" -->
						<u-button text="取消收藏"  :customStyle="customStyle1"  color="red" :plain="true" @click="cancelCollect(item,index)"></u-button>
						<!-- <u-button text="编辑" :customStyle="customStyle2" color="#2684ff" :plain="true" @click="editInfo(item,index)"></u-button> -->
					</view>
					
				</view>
				
			</view>
				
		</scroll-view>
		
		
		<u-modal :show="modalShow" title="确定删除采购需求?" closeOnClickOverlay showCancelButton @confirm="confirm" @cancel="modalShow=false" @close="modalShow=false"></u-modal>
		<!-- 取消收藏弹窗 -->
		<u-modal :show="collectShow" title="确定取消当前收藏?" closeOnClickOverlay showCancelButton @confirm="collectConfirm" @cancel="collectShow=false" @close="collectShow=false"></u-modal>
	</view>
</template>

<script>
	export default {
		// props:{
		// 	myBuyArr: {
		// 		type: Array,
		// 		default () {
		// 			return [] //['gif']
		// 		}
		// 	},
		// },
		data() {
			return {
				customStyle1: {
					border:"none",
					// fontSize:'30upx'
				},
				customStyle2: {
					border:"none",
					// fontSize:'30upx'
				},
				pageNo:1,
				pageSize:10,
				openId:'',
				name:'',
				listArr:[],
				modalShow:false,
				deleteId:'',
				myBuyArr:[],
				collectShow:false,
				recordId:'',//收藏的id
			};
		},
		mounted(){
			let openId = uni.getStorageSync('openId')
			console.log("openId", openId)
			this.openId=openId.openid
			this.myBuyArr=[]
			this.queryList()
		},
		methods:{
			lower(){
				// console.log(1)
				console.log("找供应")
				if (this.pageNo * 10 > this.total) {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
				this.pageNo++
				this.queryList()
			},
			// 我的采购列表数据
			queryList(){
				this.$api.queryMyCouponLists(this.name,this.openId,this.pageNo,this.pageSize).then(res => {
					console.log(res)
					
					if (res.success) {
						this.myBuyArr = [...this.myBuyArr, ...res.result.records]
						this.total = res.result.total
						// this.$store.commit('setMyBuyInfo', data)
					}
				})
			},
			// 取消收藏
			cancelCollect(item,index){
				console.log(item,index)
				this.collectShow=true
				this.recordId=item.id
			},
			// 确认取消收藏
			collectConfirm(){
				// 收藏
				let data = {
					openId: this.openId,
					recordId: this.recordId,
					type: 2
				}
				this.$api.collectionToBuy(data).then(res => {
					console.log(res)
					if (res.success) {
						this.collectShow=false
						this.myBuyArr=[]
						this.$api.queryMyCouponLists(this.name,this.openId,this.pageNo,this.pageSize).then(res => {
							console.log(res)
							
							if (res.success) {
								this.myBuyArr = res.result.records
								this.total = res.result.total
								// this.$store.commit('setMyBuyInfo', data)
							}
						})
						
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			deleteInfo(item,index){
				console.log(item,index)
				this.modalShow=true
				this.deleteId=item.id
			},
			editInfo(item,index){
				console.log(item,index)
				uni.navigateTo({
					url: '/pagesBusiness/purchase/purchase?editId='+item.id
				})
				
				
			},
			confirm(){
				
				this.$api.deleteMyBuyListsById(this.deleteId).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title:res.result
						})
						this.modalShow=false
						// this.$emit('deleteReset',1)
						this.$api.queryMyCouponLists(this.name,this.openId,this.pageNo,this.pageSize).then(res => {
							console.log(res)
							
							if (res.success) {
								this.myBuyArr = res.result.records
								this.total = res.result.total
								// this.$store.commit('setMyBuyInfo', data)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy-box{
		padding: 20upx;
		background: #f6f6f6;
		
		.scroll-Y{
			height: 100vh;
			width: 100%;
			.buy-title{
				font-weight: bold;
			}
			.buy-list{
				margin-top: 30upx;
				background: white;
				border-radius: 10upx;
				position: relative;
				padding: 20upx;
				.buy-top{
					border-bottom: 1px solid #f4f4f4;
					padding-bottom: 20upx;
					position: relative;
					.mark-date{
						position: absolute;
						right: -25upx;
						transform: rotateZ(30deg);
						color: #999999;
					}
					.mark-collection{
						position: absolute;
						right: 80upx;
						top: -5upx;
						width: 60upx;
						height: 60upx;
						img{
							width: 60upx;
							height: 60upx;
						}
					}
					.buy-top-title{
						font-size: 36upx;
						font-weight: bold;
					}
					.buy-top-cont{
						font-size: 32upx;
						color: #666666;
						display: flex;
						justify-content: space-between;
						margin-top: 20upx;
					}
					.buy-top-bt{
						display: flex;
						font-size: 28upx;
						margin-top: 20upx;
						color: #999999;
						.buy-top-bt-date{
							// margin-left: 10upx;
						}
					}
				}
			
				.buy-btm{
					display: flex;
					margin-top: 20upx;
					.buy-btn1{
						border: none;
					}
				}
			
			}
		}
		
		
		
		
	}
</style>
